<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单注册</title>
    <style>
        body{
            background:url("../img/bg.png");
        }
        .center{
            /* 背景颜色 */
            background: white;
            /* 宽度 */
            width:400px;
            /*  文本对齐方式 */
            text-align: center;
            /* 外边框 */
            margin: auto;
        }


    </style>

</head>
<body>
        <!--顶部公司logo展示-->
<div>
    <img src="..img/logo.png" />
</div>
<!--中间注册列表-->
<div class="center">

        <div>注册详情</div>
        <hr/>
        <form action="#" method="get" autocomplete="off">
            <div>
            <label for="username">姓名</label>
            <input type="text" id="username" name="username" value="" placeholder="在此输入姓名"required/>
            </div>

            <div>
                <label for="password">密码</label>
                <input type="text" id="password" name="password" value="" placeholder="在此输入密码"required/>
            </div>

            <div>
                <label for="email">邮箱</label>
                <input type="text" id="email" name="email" value="" placeholder="在此输入邮箱"required/>
            </div>

            <div>
                <label for="tel">手机</label>
                <input type="text" id="tel" name="tel" value="" placeholder="在此输入手机"required/>
            </div>
            <hr/>
            <div>
                <label for="gender">性别</label>
                <input type="radio" id="gender" name="gender" value="men" />男
                <input type="radio" name="gender" value="women" />女
            </div>

            <div>
                <lable for="hobby">爱好:</lable>
                <input type="checkbox" id="hobby"  name="hobby" value="music" />音乐
                <input type="checkbox" name="hobby" value="move" />电影
                <input type="checkbox" name="hobby" value="game" />游戏<br/>
            </div>
            <lable for="birthday" >出生日期</lable>
            <input type="date" id="birthday" name="birthday" value="" /><br/>

            所在城市:
            <select name="city">
                <option>--请选择所在城市--</option>
                <optgroup label="直辖市">
                    <option value="bj">北京</option>
                    <option value="sh">上海</option>
                </optgroup>
                <optgroup label="省会城市">
                    <option value="hz">杭州</option>
                    <option value="wh">武汉</option>
                </optgroup>
            </select>
            <hr/>
            <br/>
            个人介绍:<textarea name="desc" rows="5" cols="20" placeholder="请写下你的与众不同"></textarea><br/>




            <button type="submit">注册</button>
            <button type="reset">重置</button>
        </form>

</div>

<!--
表单信息
-->
<div>
    <form>

    </form>
</div>



</body>
</html>